/**
 * frontend/src/main.js
 * 前端应用入口文件，负责初始化Vue应用并配置全局插件、组件和属性
 */

import * as AntIcon from '@ant-design/icons-vue';
import Antd from 'ant-design-vue';
import { createApp } from 'vue';
import App from './App.vue';
import './assets/global.less';
import './assets/theme.less';
import router from './router/index';

// 初始化存储工具
import storageHelper from './utils/storageHelper';
// 初始化存储，使用纯localStorage和内存存储
storageHelper.init().then((success) => {
  console.log('存储系统初始化' + (success ? '成功，使用localStorage' : '失败，使用内存备份'));
}).catch(err => {
  console.error('存储系统初始化异常:', err);
});

// 导入Element Plus相关
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
// 导入Element Plus中文语言包
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import './assets/iconfont/iconfont.css';
import './assets/iconfont/myIconfont.css';
// 导入Element Plus图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
// 列出常用的图标，以便在模板中直接使用
import {
  Search,
  Plus,
  Edit,
  Delete,
  Close,
  ChatDotRound,
  ChatLineRound,
  Setting,
  Loading,
  Operation,
  PictureFilled,
  Wallet,
  Phone,
  VideoCamera,
  Microphone,
  Document,
  Position,
  WarningFilled,
  Refresh,
  Brush,
  Iphone,
  InfoFilled,
  SwitchButton,
  UserFilled,
  Service,
  Star,
  StarFilled,
  ArrowRight,
  ArrowDown,
  Message,
  Timer,
  RefreshLeft,
  Check,
  CaretRight,
  VideoPause,
  CircleClose
} from '@element-plus/icons-vue';

// 导入API和工具
import httpRequest from './api/httpRequest';
import * as socketApi from './api/wssocket';
import * as messageType from './api/messageType';
import emotion from './api/emotion.js';
import element from './api/element.js';
import store from './store';
import * as enums from './api/enums.js';
import * as date from './api/date.js';
// 导入IPC工具
import { ipc } from './utils/ipcRenderer';
// 导入对话框拖拽指令
import dialogDrag from './utils/directive/dialogDrag';
import './styles/theme.scss';

// 创建Vue应用实例
const app = createApp(App);

// 注册点击外部指令
app.directive('click-outside', {
  mounted(el, binding) {
    el.clickOutsideEvent = function(event) {
      // 检查特殊元素（如编辑框、弹出菜单等）
      const specialElements = [
        '.el-input__inner',
        '.el-icon-edit',
        '.el-dropdown-menu',
        '.el-select-dropdown',
        '.el-popper'
      ];
      
      // 检查是否点击了特殊元素
      const isSpecialElement = specialElements.some(selector => {
        return event.target.closest(selector);
      });
      
      // 如果点击了特殊元素，不关闭
      if (isSpecialElement) {
        return;
      }
      
      // 检查点击事件是否发生在元素外部
      if (!(el == event.target || el.contains(event.target))) {
        // 调用绑定的方法
        binding.value(event);
      }
    };
    document.addEventListener('click', el.clickOutsideEvent);
  },
  unmounted(el) {
    document.removeEventListener('click', el.clickOutsideEvent);
  }
});

// 使用 Element Plus
app.use(ElementPlus, {
  locale: zhCn,
  size: 'default',
  zIndex: 3000
});

// 注册Element Plus图标 - 使用统一的方式注册所有图标而不是单独列出
// 这样可以避免重复注册问题
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

// 注册Vue 3内置组件，解决teleport解析问题
import { Teleport } from 'vue';
app.component('teleport', Teleport);

// 配置全局属性
app.config.productionTip = false;
app.config.globalProperties.$wsApi = socketApi;
app.config.globalProperties.$msgType = messageType;
app.config.globalProperties.$date = date;
app.config.globalProperties.$http = httpRequest; // http请求方法
app.config.globalProperties.$emo = emotion; // emo表情
app.config.globalProperties.$elm = element; // 元素操作
app.config.globalProperties.$enums = enums; // 枚举
app.config.globalProperties.$ipc = ipc; // 注册IPC通信工具
app.config.globalProperties.$ELEMENT = {
  size: 'default',
  zIndex: 3000
};

// 注册Ant Design图标组件
for (const i in AntIcon) {
  const whiteList = ['createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor', 'default'];
  if (!whiteList.includes(i)) {
    // 添加Ant前缀，避免与Element Plus图标命名冲突
    app.component('Ant' + i, AntIcon[i]);
  }
}

// 注册全局指令
app.directive('dialogDrag', dialogDrag);

// 使用路由和状态管理
app.use(router);
app.use(store);

// 挂载应用
app.mount('#app');
